<template>
  <el-form
    ref="refControl"
    class="demo-form-inline"
    v-bind="$attrs"
    :model="model"
    :inline="false"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
  >
    <el-tabs
      v-model="tabIndex"
      type="border-card"
    >
      <el-tab-pane
        v-for="(item, index) in cardOrder"
        :key="'tabs_' + index"
        :label="item.title"
        :name="item.title"
      >
        <base-item :colOrder="item.colIds" > </base-item>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script setup lang="ts" generic="T extends object">
/* eslint-disable vue/no-setup-props-destructure */
  import { ref, onMounted } from 'vue'
  // 封装 el-form-item
  import baseItem from './base-item.vue'

  // 表单控件的属性 
  import { formController, myExpose } from '../map'
  // 表单组件的接口
  import type { IFromProps } from '../map'

  defineOptions({
    name: 'nf-el-from-tab',
    inheritAttrs: false,
  })

  const props = withDefaults(defineProps<IFromProps<T>>(), {
    labelSuffix: '：',
    labelWidth: '130px'
  })
 
  // 获取 $ref
  const { refControl, expose } = myExpose()
  // 暴露 el-form
  defineExpose({ expose })

  formController(props)
 
  // 获取分栏信息
  const { subMeta } = props.formMeta

  const cardOrder = subMeta.cols ?? []

  // tab 
  const tabIndex = ref(cardOrder[0].title)
 
</script>